<template>
  <div class="container" style="height: 100vh;width: 300px;padding: 20px;box-sizing: border-box;width: 100%;">
    <header>
      <MBreadcrumb :item="breadcrumbItem" />
    </header>
    <main>
      <MTitle class="title">
        <template #left>
          调度信息
        </template>
      </MTitle>
      <form>
        <table id="attributeTable" class="mtable">
          <tr class="mtr">
            <td class="field">在库司机</td>
            <td class="value">
              <MSelect v-model="ProductInfo[0]" :options="DriverOptions" :value="ProductInfo[0]" id="ruletype" required
                style="flex: 1 1 200px;width: 100%;font-size: 12px;" @change="optionChange">
              </MSelect>
            </td>
          </tr>
          <tr class="mtr">
            <td class="field">电话</td>
            <td class="value">
              <MInput v-model="ProductInfo[1]" style="font-size: 12px;width: 100%" disabled></MInput>
            </td>
          </tr>
          <tr class="mtr">
            <td class="field">车辆</td>
            <td class="value">
              <MInput v-model="ProductInfo[2]" style="font-size: 12px;width: 100%" disabled></MInput>
            </td>
          </tr>
          <tr class="mtr">
            <td class="field">车牌</td>
            <td class="value">
              <MInput v-model="ProductInfo[3]" style="font-size: 12px;width: 100%" disabled>
              </MInput>
            </td>
          </tr>
          <tr class="mtr">
            <td class="field">目的地</td>
            <td class="value">
              <MInput v-model="ProductInfo[4]" style="font-size: 12px;width: 100%"></MInput>
            </td>
          </tr>
          <tr class="mtr">
            <td class="field">用车时间</td>
            <td class="value">
              <MDateTime v-model="ProductInfo[5]" style="width: 100%;" />
            </td>
          </tr>
        </table>
      </form>
    </main>
    <footer>
      <div style="text-align: center;" v-if="!isDisable">
        <MButton @click="applyOrder">打印调度单</MButton>
      </div>
    </footer>
    <MMessage v-if="toastVisible" :message="toastMessage" :state="toastState" />

  </div>
</template>

<script>
import { ref, onMounted } from 'vue';
import MBreadcrumb from "../../components/MBreadcrumb.vue"
import MTitle from "../../components/MTitle.vue"
//import MList from "../../components/MList.vue"
import MButton from "../../components/MButton.vue"
import MInput from "../../components/MInput.vue"
import MMessage from '../../components/MMessage.vue';
import MSelect from '../../components/MSelect.vue';
import MDateTime from '../../components/MDateTime.vue';

//import MTag from "../../components/MTag.vue"
import axios from "../../axios/axios"
export default {
  name: "PartOrder",
  components: {
    MBreadcrumb,
    MTitle,
    MSelect,
    MButton,
    MInput,
    MMessage,
    MDateTime
    //MTag
    //MIcon
  },
  setup() {
    const toastVisible = ref(false)
    const toastMessage = ref("")
    const toastState = ref("success")
    const breadcrumbItem = ref(
      {
        key: "0",
        title: '赋码管理',
        children: {
          key: "0-0",
          title: '调度信息',
        }
      })

    const ProductInfo = ref(["0", "", "", "", "", ""])
    const tagItems = ref([])
    const params = ref([])
    const userId = ref("")
    const DriverOptions = ref([])
    const driverInfo = ref([])
    const logisticsInfo = ref({})
    const isDisable = ref(false)

    const optionChange = () => {
      var data = [...ProductInfo.value]
      var info = driverInfo.value[Number(data[0])]
      data[1] = info.driverphone
      data[2] = info.drivercar
      data[3] = info.licenseplate
      ProductInfo.value = data
    }
    const applyOrder = () => {
      if (chectValue()) {
        // console.log(logisticsInfo.value, {
        //   logisticsnumber: logisticsInfo.value.logisticsnumber,
        //   driver: driverInfo.value[Number(ProductInfo.value[0])].drivername,
        //   driverphone: driverInfo.value[Number(ProductInfo.value[0])].driverphone,
        //   carmodel: driverInfo.value[Number(ProductInfo.value[0])].drivercar,
        //   licenseplate: driverInfo.value[Number(ProductInfo.value[0])].licenseplate,
        //   recipientaddress: ProductInfo.value[4],
        //   usetime: ProductInfo.value[5],
        // });

        axios.post('/dispatch/save', {
          logisticsnumber: logisticsInfo.value.logisticsnumber,
          driver: driverInfo.value[Number(ProductInfo.value[0])].drivername,
          driverphone: driverInfo.value[Number(ProductInfo.value[0])].driverphone,
          carmodel: driverInfo.value[Number(ProductInfo.value[0])].drivercar,
          licenseplate: driverInfo.value[Number(ProductInfo.value[0])].licenseplate,
          recipientaddress: ProductInfo.value[4],
          usetime: ProductInfo.value[5],
          driverReport: "0",
          carReport: "0"
        })
          .then(response => {
            if (response.data.Code == "200") {
              messageShow("已添加调度", "success")
            } else {
              messageShow(response.data.Msg, "warning")
            }
          })
      }

    }
    const chectValue = () => {
      if (ProductInfo.value[4] === "") {
        messageShow("请输入目的地", "warning")
        return false
      }
      if (ProductInfo.value[5] === "") {
        messageShow("请输入用车时间", "warning")
        return false
      }
      return true
    }
    const messageShow = (msg, state) => {
      toastMessage.value = msg;
      toastVisible.value = true;
      toastState.value = state
      // 使用 setTimeout 模拟 Toast 组件内部的定时器功能（仅用于演示）
      // 在实际使用中，你应该依赖 Toast 组件内部的定时器
      setTimeout(() => {
        toastVisible.value = false;
      }, 3000); // 与 Toast 组件中的 duration 属性保持一致
    }
    onMounted(() => {
      // 获取 URL 参数
      const param = new URLSearchParams(window.location.search);
      params.value = param
      if (param.has('userId')) {
        userId.value = param.get('userId');
      }
      if (param.has('isDisable')) {
        isDisable.value = param.get('isDisable') === "true"
      }
      axios.get('/driver/select')
        .then(response => {
          var info = response.data.Data
          var options = []
          for (var i = 0; i < info.length; i++) {
            options.push({ value: i, text: info[i].drivername })
          }
          DriverOptions.value = options
          driverInfo.value = info
          var data = [...ProductInfo.value]
          data[0] = "0"
          data[1] = info[0].driverphone
          data[2] = info[0].drivercar
          data[3] = info[0].licenseplate
          ProductInfo.value = data
        })
      if (param.has('code')) {
        axios.get('/logistics/select?userId=' + param.get('userId') +
          '&trainingId=' + param.get('trainingId') + "&logisticsNumber=" + param.get('code'))
          .then(response => {
            logisticsInfo.value = response.data.Data
          })
      }
    });
    return {
      toastVisible,
      toastMessage,
      toastState,
      breadcrumbItem,
      tagItems,
      ProductInfo,
      DriverOptions,
      isDisable,
      applyOrder,
      optionChange,
    };
  },
};
</script>

<style scoped>
.title {
  margin-top: 30px;
}

.title1 {
  margin-top: 20px;
}

.mtr {
  display: flex;
  flex-wrap: wrap;
  /* 允许子元素换行 */
  align-items: flex-start;
}

.container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

footer {
  text-align: center;
  height: 10%;
}

main {
  flex: 1;
}

.mtable {
  width: 100%;
  font-size: 13px;

}

.field {
  text-align: left;
  padding: 4px 0;
  flex: 1 1 60px;
  word-break: break-word;
  /* 允许长单词换行 */
  overflow-wrap: break-word;
  min-width: 0;
  /* 确保内容可以缩小 */
  height: 26px;
  line-height: 26px;
}

.value {
  text-align: right;
  padding: 4px 0;
  flex: 1 1 190px;
  word-break: break-word;
  /* 允许长单词换行 */
  overflow-wrap: break-word;
  min-width: 0;
  height: 26px;
  line-height: 26px;
  /* 确保内容可以缩小 */
}
</style>
